<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>${siteName} | 个人中心-我的账号</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/png" sizes="32x32" href="icon/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="icon/favicon-16x16.png">
    <link rel="stylesheet" href="admin/plugins/fontawesome-free/css/all.min.css">
    <link rel="stylesheet" href="css/ionicons/2.0.1/ionicons.min.css">
    <link rel="stylesheet" href="admin/plugins/datatables-bs4/css/dataTables.bootstrap4.css">
    <link rel="stylesheet" href="admin/plugins/sweetalert2-theme-bootstrap-4/bootstrap-4.min.css">
    <link rel="stylesheet" href="admin/css/adminlte.min.css">
    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">
</head>
<body class="hold-transition sidebar-mini">
<div class="wrapper">
    <nav class="main-header navbar navbar-expand navbar-white navbar-light">
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" data-widget="pushmenu" href="#"><i class="fas fa-bars"></i></a>
            </li>
        </ul>
        <ul class="navbar-nav ml-auto">
            <li class="nav-item dropdown">
                <a class="nav-link" data-toggle="dropdown" href="#">
                    <i class="far fa-user text-gray"></i>
                </a>
                <div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
                    <div class="dropdown-divider"></div>
                    <a href="javascript:void(0);" class="dropdown-item" onclick="logout();">
                        <i class="fas fa-sign-out-alt mr-2"></i>登出
                    </a>
                </div>
            </li>
        </ul>
    </nav>

    <#include "./userCenterAside.ftl">

    <div class="content-wrapper">
        <section class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <h1>我的账号</h1>
                    </div>
                    <div class="col-sm-6">
                        <ol class="breadcrumb float-sm-right">
                            <li class="breadcrumb-item"><a href="/">主页</a></li>
                            <li class="breadcrumb-item active">我的账号</li>
                        </ol>
                    </div>
                </div>
            </div>
        </section>
        <section class="content">
            <div class="row">
                <div class="col-lg-6 col-sm-12">
                    <div class="card">
                        <div class="card-header">
                            <i class="fas fa-book-reader text-maroon mr-2"></i>账户信息
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-12">
                                    <strong>昵称</strong><i id="nick-icon-circle" class="fa fa-question-circle ml-3"></i>
                                    <div class="input-group mb-3">
                                        <input id="input-of-nick" type="text" class="form-control rounded-0" readonly="readonly" value="${nickName}">
                                        <span id="span-uuid" value="${uuid}" hidden></span>
                                        <span id="button-modify-nick" class="input-group-append">
                                            <button type="button" class="btn btn-info btn-flat" onclick="userCenterOnModifyNickClick(this);">修改</button>
                                        </span>
                                        <span id="button-finish-nick" class="input-group-append">
                                            <button type="button" class="btn btn-success btn-flat" onclick="userCenterOnFinishNickClick(this);">完成</button>
                                        </span>
                                        <span id="button-abandon-nick" class="input-group-append">
                                            <button type="button" class="btn btn-warning btn-flat" onclick="userCenterOnAbandonNickClick(this);">放弃</button>
                                        </span>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-12">
                                    <strong>邮箱</strong>
                                    <div class="input-group mb-3">
                                        <input type="text" class="form-control rounded-0" readonly="readonly" value="${email}">
                                        <span class="input-group-append">
                                            <button id="change-update-email-button" type="button" class="btn btn-info btn-flat" onclick="useCenterOnBindChangeEmail(this);">绑定/更换</button>
                                        </span>
                                    </div>
                                </div>
                            </div>
                            <div class="row" id="change-email-container" style="display: none;">
                                <div class="col-12">
                                    <div class="small-box bg-warning">
                                        <div class="inner">
                                            <div class="input-group mb-3">
                                                <input id='email-verify-input' type="text" class="form-control rounded-0">
                                                <span class="input-group-append">
                                                    <button type="button" class="btn btn-warning btn-flat" onclick="useCenterOnSendVerifyEmail(this);">发送验证邮件</button>
                                                </span>
                                            </div>
                                        </div>
                                        <div class="icon">
                                            <i class="far fa-envelope"></i>
                                        </div>
                                        <strong class="small-box-footer">将要绑定的新邮箱</strong>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card card-success">
                        <div class="card-header">
                            <h3 class="card-title"><i class="fa fa-lock mr-2" aria-hidden="true"></i>密码管理</h3>
                            <div class="card-tools">
                                <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i></button>
                            </div>
                        </div>
                        <div class="card-body">
                            <button id="button-modify-password" type="button" class="btn btn-info btn-flat" onclick="userCenterAccountOnModifyPassword(this);">修改密码</button>

                            <div id="password-modify-area" style="display: none;">
                                <div class="row">
                                    <div class="col-12">
                                        <strong>原来的密码</strong>
                                        <div class="input-group mb-3">
                                            <input type="password" class="form-control rounded-0" id="original-password-input">
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-12">
                                        <strong>新的密码</strong>
                                        <div class="input-group mb-3">
                                            <input type="password" class="form-control rounded-0" id="new-password-input">
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-12">
                                        <strong>新的密码（再输入一遍）</strong>
                                        <div class="input-group mb-3">
                                            <input type="password" class="form-control rounded-0" id="new-password2-input">
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-12">
                                        <button class="btn btn-primary btn-block" onclick="userCenterAccountOnConfirmPassword(this);">确认更改</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-6 col-sm-12">
                    <div class="card">
                        <div class="card-header">
                            <i class="fa fa-money-check text-yellow mr-2" aria-hidden="true"></i>积分
                        </div>
                        <div class="card-body">
                            ${money}
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-6 col-sm-12">
                    <div class="card">
                        <div class="card-header">
                            <i class="fas fa-user-tie text-blue mr-2"></i>头像
                        </div>
                        <div class="card-body">
                            <div class="row justify-content-center">
                                <img src="dist/img/user-128x128.png" alt="User Image" style="border-radius: 50%;" class="mb-4">
                            </div>
<#--                            <div class="row justify-content-center">-->
<#--                                <div>-->
<#--                                    <button class="btn btn-outline-warning" onclick="userCenterOnModifyPortraitClick(this);">修改头像请点击</button>-->
<#--                                </div>-->
<#--                            </div>-->
                            <div id="stepto-modify-portrait" style="display: none;">
                                <div class="form-group border-top mt-2 pt-3">
                                    <div class="row">
                                        <label for="exampleInputFile" class="mb-3">第一步：点击下面的按钮，从硬盘上选择图片</label>
                                        <form id="uploadPic" action="#" enctype="multipart/form-data">
                                            <input id="input-file-path" type="file" name="file" onchange="userCenterOnImageChanged(this);">
                                        </form>
                                    </div>
                                    <div class="row mt-3">
                                        <label>第二步：下面的图框中预览刚才选择的图片</label>
                                    </div>
                                    <div class="row">
                                        <img src="dist/img/user3-128x128.jpg" alt="User Image" id="picture-portrait-preview">
                                    </div>
                                    <div class="row mt-3">
                                        <label>第三步：点击下面的按钮上传到服务器</label>
                                    </div>
                                    <div class="row">
                                        <button onclick="javascript:userCenterOnUploadImage();" class="btn btn-success">提交</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
    <#include "./footer.ftl">
</div>

<script src="admin/plugins/jquery/jquery.min.js"></script>
<script src="admin/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="admin/plugins/tipped/css/tipped.css">
<script src="admin/plugins/tipped/js/tipped.min.js"></script>
<script src="admin/plugins/datatables/jquery.dataTables.js"></script>
<script src="admin/plugins/datatables-bs4/js/dataTables.bootstrap4.js"></script>
<script src="admin/plugins/sweetalert2/sweetalert2.min.js"></script>
<script src="admin/js/adminlte.min.js"></script>
<script src="plugin/crypto-js.js"></script>
<script src="plugin/jsencrypt.min.js"></script>
<script src="utility.js"></script>
<script src="script/page/usercenter.js"></script>
<div id="toastsContainerTopRight" class="toasts-top-right fixed" style="display: ${needVerify}">
    <div class="toast bg-maroon fade show" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="toast-header">
            <strong class="mr-auto"><i class="fa fa-exclamation-triangle mr-2" aria-hidden="true"></i>警告</strong>
            <small>紧急</small>
            <button data-dismiss="toast" type="button" class="ml-2 mb-1 close" aria-label="Close" onclick="useCenterOnCloseToast();">
                <span aria-hidden="true">×</span>
            </button>
        </div>
        <div class="toast-body"><strong style="color: #7fff00">邮箱</strong>是未来找回密码的唯一方式，请及早绑定相关信息并验证，防止密码忘记后账号无法找回。</div>
    </div>
</div>
</body>
</html>
